.modal-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  top: 0;
  bottom: 0;
  background: rgba(126, 126, 126, 0.5);
  .modal-box {
    width: 300px;
    background: #fff;
    border-radius: $border-radius;
    box-shadow: 1px 1px 10px #e6dede;
    position: relative;
    top: 10%;
    padding: $margin-base * 2;
    display: flex;
    flex-direction: column;
    header {
      display: flex;
      justify-content: space-between;
    }
    .content {
      text-align: center;
      margin: $margin-base * 2 0;
      font-family: $font-family;
      font-size: $font-size;
      i {
        margin-right: $margin-base / 2;
      }
    }
    footer {
      display: flex;
      justify-content: flex-end;
      font-size: $font-size;
      button {
        padding: $margin-base / 2 $margin-base;
        margin: 0 $margin-base / 2;
        border-radius: $border-radius;
      }
      button.query {
        background: #209f85;
        color: #fff;
      }
    }
  }
}
